<template>
	<div v-if="!props.isDisabled" style="display: flex; justify-content: flex-end">
		<el-button type="primary" @click="handleAddUnit">新增</el-button>
	</div>
	<el-table v-loading="state.dataListLoading" :data="state.dataList" stripe class="layout-table">
		<el-table-column type="index" label="序号" header-align="center" align="center" width="60"></el-table-column>
		<el-table-column prop="standardNumber" label="标准编号" header-align="center" align="center"></el-table-column>
		<el-table-column prop="standardName" label="标准名称" header-align="center" align="center"></el-table-column>
		<el-table-column v-if="!props.isDisabled" label="操作" fixed="right" header-align="center" align="center" width="150">
			<template #default="scope">
				<el-icon :size="16" color="#1491FF" title="编辑" style="cursor: pointer; margin: 0 6px" @click="handleEditUnit(scope.row)">
					<Edit />
				</el-icon>
				<el-icon :size="16" color="#fe6360" title="删除" style="cursor: pointer; margin: 0 6px" @click="handleDeleteUnit(scope.row)">
					<Delete />
				</el-icon>
			</template>
		</el-table-column>
	</el-table>
	<cmDialog v-model="dialogState" modal-title="引用标准" model-width="900px">
		<div style="padding: 20px 40px">
			<el-form ref="drafterFormRef" :model="drafterForm" :rules="drafterRules" label-width="120px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="标准编号" prop="standardNumber">
							<el-input v-model="drafterForm.standardNumber" placeholder="请输入" maxlength="10" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="标准名称" prop="standardName">
							<el-input v-model="drafterForm.standardName" placeholder="请输入" maxlength="20" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="备注" prop="remark">
							<el-input v-model="drafterForm.remark" placeholder="请输入" maxlength="200" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div class="dialog-foot">
				<el-button @click="handleAddCancel">取消</el-button>
				<el-button type="primary" @click="handleAddFormSubmit(drafterFormRef)">确定</el-button>
			</div>
		</div>
	</cmDialog>
</template>
<script setup lang="ts">
import { referenceDelApi, referenceListApi, referenceUpdateApi } from '@/api/standard/maintenance/index'
import cmDialog from '@/components/cm-dialog/index.vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessageBox } from 'element-plus'
import { reactive, ref, watch } from 'vue'
const props = defineProps({
	systemId: {
		type: String,
		default: ''
	},
	currentTab: {
		type: String,
		default: ''
	},
	isDisabled: {
		type: Boolean,
		default: false
	}
})

const state = reactive({
	pageNum: 1,
	pageSize: 100,
	total: 1,
	dataListLoading: false,
	dataList: []
})
const dialogState = ref(false)
const drafterFormRef = ref<FormInstance>()

const drafterForm = reactive({
	standardName: '',
	standardNumber: '',
	remark: ''
})
const drafterRules = reactive<FormRules>({
	standardName: [{ required: true, message: '请输入', trigger: 'blur' }],
	standardNumber: [{ required: true, message: '请输入', trigger: 'blur' }]
})

watch(
	() => props.currentTab,
	val => {
		if (val && val == 'tab6') {
			getDataList()
		}
	}
)

watch(
	() => dialogState.value,
	val => {
		if (!val) {
			restForm()
		}
	}
)

const getDataList = () => {
	state.dataListLoading = true
	referenceListApi({
		systemId: props.systemId,
		pageNum: state.pageNum,
		pageSize: state.pageSize
	}).then(res => {
		state.dataListLoading = false
		state.dataList = res.data.list || []
		state.total = res.data.total || 0
	})
}

const handleAddUnit = () => {
	dialogState.value = true
}

const handleEditUnit = (row: any) => {
	Object.assign(drafterForm, row)
	dialogState.value = true
}

const handleDeleteUnit = (row: any) => {
	ElMessageBox.confirm('确定要删除吗?', '提示', {
		confirmButtonText: '删除',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		referenceDelApi({
			id: row.id
		}).then(res => {
			getDataList()
		})
	})
}

const restForm = () => {
	Object.assign(drafterForm, { id: '' })
	Object.assign(drafterForm, { standardName: '' })
	Object.assign(drafterForm, { standardNumber: '' })
	Object.assign(drafterForm, { remark: '' })
}

const handleAddCancel = () => {
	restForm()
	dialogState.value = false
}

const handleAddFormSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) {
		return
	}
	await formEl.validate((valid, fields) => {
		if (valid) {
			let submittedData = { ...drafterForm, systemId: props.systemId }
			referenceUpdateApi(submittedData).then(res => {
				getDataList()
				handleAddCancel()
			})
		} else {
			console.log('error submit!', fields)
		}
	})
}
</script>
<style lang="scss" scoped>
.dialog-foot {
	display: flex;
	justify-content: center;
	padding-top: 20px;
	margin-bottom: 10px;
}
</style>
